const { dia, shapes } = joint;
const { Path } = g;

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
    el: document.getElementById('paper'),
    width: 570,
    height: 600,
    background: {
        color: '#F3F7F6'
    },
    gridSize: 1,
    async: true,
    frozen: true,
    model: graph,
    cellViewNamespace: shapes,
    defaultConnector: (sourcePoint, targetPoint, vertices) => {
        const d = 1e-3;
        const connection = new Path();
        connection.appendSegment(Path.createSegment('M', sourcePoint));
        vertices.forEach(vertex => connection.appendSegment(Path.createSegment('L', vertex)));
        if (connection.end.x === targetPoint.x) targetPoint.x += d;
        if (connection.end.y === targetPoint.y) targetPoint.y += d;
        connection.appendSegment(Path.createSegment('L', targetPoint));
        return connection;
    }
});

const linearGradientFill = new shapes.standard.Rectangle({
    size: { width: 200, height: 100 },
    attrs: {
        body: {
            rx: 2,
            ry: 2,
            stroke: '#333',
            strokeWidth: 2,
            fill: {
                type: 'linearGradient',
                stops: [
                    { offset: 0, color: '#1f005c' },
                    { offset: 0.14285714285714285, color: '#5b0060' },
                    { offset: 0.2857142857142857, color: '#870160' },
                    { offset: 0.42857142857142855, color: '#ac255e' },
                    { offset: 0.5714285714285714, color: '#ca485c' },
                    { offset: 0.7142857142857142, color: '#e16b5c' },
                    { offset: 0.8571428571428571, color: '#f39060' },
                    { offset: 1, color: '#ffb56b' },
                ]
            },
            filter: {
                name: 'dropShadow',
                args: { dx: 4, dy: 4, blur: 5, color: '#333' }
            }
        },
        label: {
            fontSize: 20,
            fontFamily: 'sans-serif',
            fill: '#fff',
            text: 'Linear Gradient'
        }
    }
});

const radialGradientFill = new shapes.standard.Ellipse({
    size: { width: 200, height: 200 },
    attrs: {
        body: {
            stroke: '#333',
            strokeWidth: 2,
            fill: {
                type: 'radialGradient',
                stops: [
                    { offset: 0, color: '#ffb56b' },
                    { offset: 0.14285714285714285, color: '#f39060' },
                    { offset: 0.2857142857142857, color: '#e16b5c' },
                    { offset: 0.42857142857142855, color: '#ca485c' },
                    { offset: 0.5714285714285714, color: '#ac255e' },
                    { offset: 0.7142857142857142, color: '#870160' },
                    { offset: 0.8571428571428571, color: '#5b0060' },
                    { offset: 1, color: '#1f005c' },
                ]
            },
            filter: {
                name: 'dropShadow',
                args: { dx: 3, dy: 3, blur: 10, color: '#333' }
            }
        },
        label: {
            fontSize: 20,
            fontFamily: 'sans-serif',
            fill: '#fff',
            text: 'Radial Gradient'
        }
    }
});

const linearGradientStroke = new shapes.standard.DoubleLink({
    attrs: {
        line: {
            stroke: {
                type: 'linearGradient',
                stops: [
                    { offset: '0%', color: '#7B5CCE' },
                    { offset: '100%', color: '#fff' },
                ]
            },
            outline: {
                stroke: '#7b5cce'
            },
            targetMarker: {
                fill: '#fff',
                stroke: '#7b5cce'
            },
            sourceMarker: {
                markup: `
                    <circle cx="6" cy="0" r="12" fill="#7b5cce"/>
                    <polygon points="0,0 6,6 12,0 6,-6" fill="#d63865" stroke="#fff" />
                `
            }
        }
    }
});


const patternFill1 = new shapes.standard.Rectangle({
    size: { width: 200, height: 100 },
    attrs: {
        body: {
            stroke: '#333',
            strokeWidth: 2,
            fill: {
                type: 'pattern',
                attrs: {
                    'width': 12,
                    'height': 12,
                    'stroke-width': 1,
                    'stroke': '#333',
                    'fill': 'none'

                },
                markup: [{
                    tagName: 'rect',
                    attributes: {
                        width: 12,
                        height: 12,
                        fill: '#fff',
                        stroke: 'none'
                    }
                }, {
                    tagName: 'path',
                    attributes: {
                        d: 'M-1,11 l2,2 M11,13 l2,-2'
                    }
                }, {
                    tagName: 'polyline',
                    attributes: {
                        points: '0,0 6,6 12,0'
                    }
                }]
            }
        },
        label: {
            fontSize: 20,
            fontFamily: 'sans-serif',
            fill: '#333',
            stroke: '#fff',
            strokeWidth: 5,
            paintOrder: 'stroke',
            text: 'Fill Pattern 1'
        }
    }
});

// Pattern Monster (https://pattern.monster/) Examples

// <pattern id='a' patternUnits='userSpaceOnUse' width='40' height='59.428' patternTransform='scale(2) rotate(0)'>
//   <rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/>
//   <path d='M0 70.975V47.881m20-1.692L8.535 52.808v13.239L20 72.667l11.465-6.62V52.808zm0-32.95l11.465-6.62V-6.619L20-13.24 8.535-6.619V6.619L20 13.24m8.535 4.927v13.238L40 38.024l11.465-6.62V18.166L40 11.546zM20 36.333L0 47.88m0 0v23.094m0 0l20 11.548 20-11.548V47.88m0 0L20 36.333m0 0l20 11.549M0 11.547l-11.465 6.619v13.239L0 38.025l11.465-6.62v-13.24L0 11.548v-23.094l20-11.547 20 11.547v23.094M20 36.333V13.24'  stroke-linecap='square' stroke-width='1' stroke='hsla(258.5,59.4%,59.4%,1)' fill='none'/>
// </pattern>

const patternFill2 = new shapes.standard.Rectangle({
    size: { width: 200, height: 100 },
    attrs: {
        body: {
            stroke: 'hsla(258.5,59.4%,59.4%,1)',
            strokeWidth: 2,
            fill: {
                type: 'pattern',
                attrs: {
                    'width': 40,
                    'height': 59.428,
                    patternTransform: 'scale(0.5) rotate(45)'
                },
                markup: `
                  <rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/>
                  <path d='M0 70.975V47.881m20-1.692L8.535 52.808v13.239L20 72.667l11.465-6.62V52.808zm0-32.95l11.465-6.62V-6.619L20-13.24 8.535-6.619V6.619L20 13.24m8.535 4.927v13.238L40 38.024l11.465-6.62V18.166L40 11.546zM20 36.333L0 47.88m0 0v23.094m0 0l20 11.548 20-11.548V47.88m0 0L20 36.333m0 0l20 11.549M0 11.547l-11.465 6.619v13.239L0 38.025l11.465-6.62v-13.24L0 11.548v-23.094l20-11.547 20 11.547v23.094M20 36.333V13.24'  stroke-linecap='square' stroke-width='1' stroke='hsla(258.5,59.4%,59.4%,1)' fill='none'/>
                `
            }
        },
        label: {
            fontSize: 20,
            fontFamily: 'sans-serif',
            fill: '#333',
            stroke: '#fff',
            strokeWidth: 5,
            paintOrder: 'stroke',
            text: 'Fill Pattern 2'
        }
    }
});

// <pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(2) rotate(0)'>
//   <rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/>
//   <path d='M25 3.95L22.3 9.2c-1.45 2.75-.95 6.15 1.25 8.35L25 19l1.45-1.45c2.15-2.2 2.65-5.6 1.25-8.35zm0 7.5c.85 0 1.5.7 1.5 1.5 0 .85-.65 1.5-1.5 1.5s-1.5-.7-1.5-1.5c0-.85.65-1.5 1.5-1.5zm-13.1.45l.75 5.6c.15 1.15 1 2.05 2.1 2.35l6.8 1.7-1.7-6.8c-.25-1.1-1.2-1.95-2.35-2.1zm26.2 0l-5.6.75c-1.15.15-2.05 1-2.35 2.1l-1.7 6.8 6.8-1.7c1.1-.25 1.95-1.2 2.1-2.35zm-21.4 3.4c.75 0 1.4.6 1.4 1.4 0 .4-.15.75-.4 1s-.6.4-1 .4c-.75 0-1.4-.6-1.4-1.4 0-.35.15-.75.4-1s.6-.4 1-.4zm16.55 0c.4 0 .75.15 1 .4s.4.6.4 1c0 .75-.6 1.4-1.4 1.4-.4 0-.75-.15-1-.4s-.4-.6-.4-1c0-.75.6-1.4 1.4-1.4zm4.28 6.179a7.102 7.102 0 00-5.08 2.072L31 25l1.45 1.45c2.2 2.15 5.6 2.65 8.35 1.25l5.25-2.7-5.25-2.7a7.126 7.126 0 00-3.27-.821zm-25.06.035a7.267 7.267 0 00-3.27.787L3.95 25l5.25 2.7c2.75 1.45 6.15.95 8.35-1.25L19 25l-1.45-1.45c-1.374-1.343-3.218-2.043-5.08-2.036zm12.53.685c-.75 0-1.45.301-1.95.801s-.8 1.2-.8 1.95.3 1.45.8 1.95 1.2.8 1.95.8 1.45-.3 1.95-.8.8-1.2.8-1.95-.3-1.45-.8-1.95-1.2-.8-1.95-.8zm12 1.25c.85 0 1.5.65 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.65-1.5-1.5.7-1.5 1.5-1.5zM13 23.5c.8 0 1.5.65 1.5 1.5s-.7 1.5-1.5 1.5c-.85 0-1.5-.65-1.5-1.5s.7-1.5 1.5-1.5zm8.55 4.95l-6.8 1.7c-1.1.25-1.95 1.2-2.1 2.35l-.75 5.6 5.6-.75c1.15-.15 2.05-1 2.35-2.1zm6.9 0l1.7 6.8c.25 1.1 1.2 1.95 2.35 2.1l5.6.7-.75-5.6c-.15-1.15-1-2.05-2.1-2.35zM25 31l-1.45 1.45c-2.15 2.2-2.65 5.6-1.25 8.35l2.7 5.25 2.7-5.25c1.45-2.75.95-6.15-1.25-8.35zm8.3.85c.75 0 1.4.6 1.4 1.4 0 .4-.15.75-.4 1s-.6.4-1 .4c-.75 0-1.4-.6-1.4-1.4 0-.4.15-.75.4-1s.6-.4 1-.4zm-16.55.05c.4 0 .75.15 1 .4s.4.6.4 1c0 .75-.6 1.4-1.4 1.4-.4 0-.75-.2-1-.4-.25-.25-.4-.6-.4-1 0-.75.6-1.4 1.4-1.4zM25 35.5c.85 0 1.5.7 1.5 1.5 0 .85-.65 1.5-1.5 1.5s-1.5-.7-1.5-1.5.65-1.5 1.5-1.5z'  stroke-width='1' stroke='none' fill='hsla(258.5,59.4%,59.4%,1)'/>
//   <path d='M1 0c.5.9 1.45 1.5 2.55 1.5C4.65 1.5 5.6.9 6.1 0zm42.9 0c.5.9 1.45 1.5 2.55 1.5C47.55 1.5 48.5.9 49 0zM0 1v5.1c.9-.5 1.5-1.45 1.5-2.55C1.5 2.45.9 1.5 0 1zm50 0c-.9.5-1.5 1.45-1.5 2.55 0 1.1.6 2.05 1.5 2.55zM0 43.9V49c.9-.5 1.5-1.45 1.5-2.55 0-1.1-.6-2.05-1.5-2.55zm50 0c-.9.5-1.5 1.45-1.5 2.55 0 1.1.6 2.05 1.5 2.55zM3.55 48.5c-1.1 0-2.05.6-2.55 1.5h5.1c-.5-.9-1.45-1.5-2.55-1.5zm42.9 0c-1.1 0-2.05.6-2.55 1.5H49c-.5-.9-1.45-1.5-2.55-1.5z'  stroke-width='1' stroke='none' fill='hsla(339.6,82.2%,51.6%,1)'/>
//   <path d='M11.7 0A28.002 28.002 0 00.05 11.65v1.45c1.3-2.8 3.1-5.4 5.4-7.65A27.64 27.64 0 0113.15 0H11.7zm25.2.05c2.8 1.3 5.4 3.1 7.65 5.4a27.64 27.64 0 015.45 7.7V11.7A28.002 28.002 0 0038.35.05H36.9zm-16.6.9a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm9.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM17.65 3.6a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm14.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-17.4 2.65a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm20.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM12.3 8.9a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm25.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM9.45 11.75a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm31.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM6.8 14.4a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm36.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM4.15 17.05a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm41.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM1.5 19.75a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm47 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-47 9.4a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm47 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM4.15 31.8a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm41.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM6.8 34.45a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm36.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM0 36.85v1.45a28.002 28.002 0 0011.65 11.65h1.45c-2.8-1.3-5.4-3.15-7.65-5.4A27.64 27.64 0 010 36.85zm49.95 0a25.563 25.563 0 01-5.4 7.7 27.64 27.64 0 01-7.7 5.45h1.45a28.002 28.002 0 0011.65-11.65v-1.5zm-40.5.3a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm31.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-28.25 2.8a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm25.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-22.75 2.7a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm20.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-17.4 2.65a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm14.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM20.3 47.95a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm9.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55z'  stroke-width='1' stroke='none' fill='hsla(198.7,97.6%,48.4%,1)'/>
// </pattern>

const patternFill3 = new shapes.standard.Ellipse({
    size: { width: 300, height: 200 },
    attrs: {
        body: {
            stroke: '#333',
            strokeWidth: 2,
            fill: {
                type: 'pattern',
                attrs: {
                    'width': 50,
                    'height': 50
                },
                markup: `
                  <rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/>
                  <path d='M25 3.95L22.3 9.2c-1.45 2.75-.95 6.15 1.25 8.35L25 19l1.45-1.45c2.15-2.2 2.65-5.6 1.25-8.35zm0 7.5c.85 0 1.5.7 1.5 1.5 0 .85-.65 1.5-1.5 1.5s-1.5-.7-1.5-1.5c0-.85.65-1.5 1.5-1.5zm-13.1.45l.75 5.6c.15 1.15 1 2.05 2.1 2.35l6.8 1.7-1.7-6.8c-.25-1.1-1.2-1.95-2.35-2.1zm26.2 0l-5.6.75c-1.15.15-2.05 1-2.35 2.1l-1.7 6.8 6.8-1.7c1.1-.25 1.95-1.2 2.1-2.35zm-21.4 3.4c.75 0 1.4.6 1.4 1.4 0 .4-.15.75-.4 1s-.6.4-1 .4c-.75 0-1.4-.6-1.4-1.4 0-.35.15-.75.4-1s.6-.4 1-.4zm16.55 0c.4 0 .75.15 1 .4s.4.6.4 1c0 .75-.6 1.4-1.4 1.4-.4 0-.75-.15-1-.4s-.4-.6-.4-1c0-.75.6-1.4 1.4-1.4zm4.28 6.179a7.102 7.102 0 00-5.08 2.072L31 25l1.45 1.45c2.2 2.15 5.6 2.65 8.35 1.25l5.25-2.7-5.25-2.7a7.126 7.126 0 00-3.27-.821zm-25.06.035a7.267 7.267 0 00-3.27.787L3.95 25l5.25 2.7c2.75 1.45 6.15.95 8.35-1.25L19 25l-1.45-1.45c-1.374-1.343-3.218-2.043-5.08-2.036zm12.53.685c-.75 0-1.45.301-1.95.801s-.8 1.2-.8 1.95.3 1.45.8 1.95 1.2.8 1.95.8 1.45-.3 1.95-.8.8-1.2.8-1.95-.3-1.45-.8-1.95-1.2-.8-1.95-.8zm12 1.25c.85 0 1.5.65 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.65-1.5-1.5.7-1.5 1.5-1.5zM13 23.5c.8 0 1.5.65 1.5 1.5s-.7 1.5-1.5 1.5c-.85 0-1.5-.65-1.5-1.5s.7-1.5 1.5-1.5zm8.55 4.95l-6.8 1.7c-1.1.25-1.95 1.2-2.1 2.35l-.75 5.6 5.6-.75c1.15-.15 2.05-1 2.35-2.1zm6.9 0l1.7 6.8c.25 1.1 1.2 1.95 2.35 2.1l5.6.7-.75-5.6c-.15-1.15-1-2.05-2.1-2.35zM25 31l-1.45 1.45c-2.15 2.2-2.65 5.6-1.25 8.35l2.7 5.25 2.7-5.25c1.45-2.75.95-6.15-1.25-8.35zm8.3.85c.75 0 1.4.6 1.4 1.4 0 .4-.15.75-.4 1s-.6.4-1 .4c-.75 0-1.4-.6-1.4-1.4 0-.4.15-.75.4-1s.6-.4 1-.4zm-16.55.05c.4 0 .75.15 1 .4s.4.6.4 1c0 .75-.6 1.4-1.4 1.4-.4 0-.75-.2-1-.4-.25-.25-.4-.6-.4-1 0-.75.6-1.4 1.4-1.4zM25 35.5c.85 0 1.5.7 1.5 1.5 0 .85-.65 1.5-1.5 1.5s-1.5-.7-1.5-1.5.65-1.5 1.5-1.5z'  stroke-width='1' stroke='none' fill='hsla(258.5,59.4%,59.4%,1)'/>
                  <path d='M1 0c.5.9 1.45 1.5 2.55 1.5C4.65 1.5 5.6.9 6.1 0zm42.9 0c.5.9 1.45 1.5 2.55 1.5C47.55 1.5 48.5.9 49 0zM0 1v5.1c.9-.5 1.5-1.45 1.5-2.55C1.5 2.45.9 1.5 0 1zm50 0c-.9.5-1.5 1.45-1.5 2.55 0 1.1.6 2.05 1.5 2.55zM0 43.9V49c.9-.5 1.5-1.45 1.5-2.55 0-1.1-.6-2.05-1.5-2.55zm50 0c-.9.5-1.5 1.45-1.5 2.55 0 1.1.6 2.05 1.5 2.55zM3.55 48.5c-1.1 0-2.05.6-2.55 1.5h5.1c-.5-.9-1.45-1.5-2.55-1.5zm42.9 0c-1.1 0-2.05.6-2.55 1.5H49c-.5-.9-1.45-1.5-2.55-1.5z'  stroke-width='1' stroke='none' fill='hsla(339.6,82.2%,51.6%,1)'/>
                  <path d='M11.7 0A28.002 28.002 0 00.05 11.65v1.45c1.3-2.8 3.1-5.4 5.4-7.65A27.64 27.64 0 0113.15 0H11.7zm25.2.05c2.8 1.3 5.4 3.1 7.65 5.4a27.64 27.64 0 015.45 7.7V11.7A28.002 28.002 0 0038.35.05H36.9zm-16.6.9a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm9.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM17.65 3.6a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm14.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-17.4 2.65a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm20.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM12.3 8.9a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm25.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM9.45 11.75a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm31.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM6.8 14.4a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm36.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM4.15 17.05a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm41.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM1.5 19.75a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm47 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-47 9.4a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm47 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM4.15 31.8a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm41.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM6.8 34.45a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm36.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM0 36.85v1.45a28.002 28.002 0 0011.65 11.65h1.45c-2.8-1.3-5.4-3.15-7.65-5.4A27.64 27.64 0 010 36.85zm49.95 0a25.563 25.563 0 01-5.4 7.7 27.64 27.64 0 01-7.7 5.45h1.45a28.002 28.002 0 0011.65-11.65v-1.5zm-40.5.3a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm31.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-28.25 2.8a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm25.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-22.75 2.7a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm20.1 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm-17.4 2.65a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm14.7 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zM20.3 47.95a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55zm9.4 0a.55.55 0 00-.55.55.55.55 0 00.55.55.55.55 0 00.55-.55.55.55 0 00-.55-.55z'  stroke-width='1' stroke='none' fill='hsla(198.7,97.6%,48.4%,1)'/>
                `
            },
        },
        label: {
            fontSize: 20,
            fontFamily: 'sans-serif',
            fill: '#333',
            stroke: '#fff',
            strokeWidth: 4,
            paintOrder: 'stroke',
            text: 'Fill Pattern 3'
        }
    }
});

graph.addCells([
    linearGradientFill.position(20, 20),
    radialGradientFill.position(300, 20),
    patternFill1.position(20, 200),
    patternFill2.position(20, 400),
    patternFill3.position(250, 250),
    linearGradientStroke.source({ x: 20, y: 550 }).target({ x: 550, y: 550 }),
]);

paper.unfreeze();
